<template>
  <div ref="menuData">
    <template v-for="titem in navData.children">
      <!-- 如果子级还有子级 -->
      <template v-if="titem.children.length > 0">
        <Submenu :name="titem.id">
          <template slot="title"><i :class="titem.menuIcon"></i>{{titem.name}}</template>
          <!--循环子级 -->
          <menuData :navData="titem"></menuData>
        </Submenu>
      </template>
      <!-- 没有子集 直接渲染 -->
      <template v-else>
        <MenuItem :name="titem.menuUrl" :to="titem.menuUrl"><i :class="titem.menuIcon"></i>{{titem.name}}
        </MenuItem>
      </template>
    </template>
  </div>
</template>
<script>

  import menuData from "./menuData";
  export default {
    props: ['navData'],
    components: {
      menuData,//列表
    },
    data() {
      return {}
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态

    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态

    },
    methods: {//执行的方法

    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less" scoped>

</style>
